<div class="card">
  <div class="card-block">
    <ng-container
      *ngTemplateOutlet="currentAction ? action : content"
    ></ng-container>
  </div>
  <ng-container *ngTemplateOutlet="currentAction ? formFooter : actionFooter"></ng-container>
</div>


<ng-template #action>
  <h3 class="card-title">{{ currentAction.title }}</h3>
  <app-form
    #appForm
    [form]="currentAction.form"
  >
  </app-form>
</ng-template>

<ng-template #formFooter>
  <div class="card-footer">
    <button class="btn btn-primary btn-sm" type="submit" (click)="onActionSubmit()">Submit</button>
    <button class="btn btn-sm" type="button" (click)="onActionCancel()">
      Cancel
    </button>
  </div>
</ng-template>

<ng-template #actionFooter>
  <div class="card-footer" *ngIf="v?.config.actions?.length > 0">
    <ng-container *ngFor="let action of v?.config.actions; trackBy: trackByFn">
      <button class="btn btn-sm btn-link" (click)="setAction(action)">
        {{ action.name }}
      </button>
    </ng-container>
  </div>
</ng-template>

<ng-template #content>
  <ng-container *ngIf="v?.config.alert">
    <app-alert [alert]="v?.config.alert"></app-alert>
  </ng-container>
  <h4 class="card-title">
    <app-view-title [views]="title"></app-view-title>
  </h4>

  <div class="card-text">
    <app-view-container [view]="body"></app-view-container>
  </div>
</ng-template>
